<template>
  <div class="page-container">
    <h2 class="page-title">{{ title }}</h2>
    <div class="page-content">
      <slot></slot>
      
      <!-- 默认内容 -->
      <div v-if="!$slots.default" class="default-content">
        <el-empty :description="description || '暂无数据'" :image-size="200">
          <template #image>
            <el-icon class="empty-icon"><component :is="icon" /></el-icon>
          </template>
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: 'Document'
  }
})
</script>

<style lang="scss" scoped>
.page-container {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  
  .page-title {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #303133;
  }
  
  .page-content {
    flex: 1;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
    overflow: auto;
  }
  
  .default-content {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .empty-icon {
      font-size: 80px;
      color: #909399;
    }
  }
}
</style> 